<template>
    <Header></Header>
    <div class="jumbotron">
        <div class="shadow">
        </div>
        <el-image style="width: 100%; height: 1800px;position: absolute;" :src="api.show + images[0]" :fit="fit" />
        <div class="container">
            <h2 class="work-title">{{ data.name }}</h2>
            <span class="author-info">作者：<span class="author-name" @click="toUser(data.userId)">{{
            data.userName }}</span>

                <span class="timeago">{{ data.createTime.substring(0, 10) }}</span>
            </span>

            <div class="category">
                <span class="count">浏览：{{ data.watchCount }}</span>
            </div>
        </div>
    </div>

    <p class="description">&nbsp;&nbsp;{{ data.description }}</p>
    <div class="article-container">

        <el-image v-for="image in images" :key="image" class="scrollbar-demo-item" :src="api.show + image">
        </el-image>
    </div>
    <div class="comment">
        <div class="container">
            <h4 style="font-size: 18px;"> <el-badge :value="comments.length" class="item">
                    评论
                </el-badge></h4>
            <div class="comment-input" id="comment">
                <el-input class="input" type="textarea" v-model="comment" maxlength="60" show-word-limit></el-input>
                <el-button class="button" @click="commentChange">评论</el-button>
            </div>
            <div class="comment-item" v-for="item in comments">
                <el-avatar :size="50" :src="api.show + item.avatar" />
                <div style="margin-left: 20px;">
                    <p style="color: #94a5be;font-size: 14px;line-height: 20px;">{{ item.userName }}&nbsp;&nbsp;&nbsp;
                        &nbsp;{{ item.createTime.replace("T", " ").substring(0, 19) }}</p>
                    <el-text style="color: #333;">{{ item.message }}</el-text>
                </div>
            </div>
        </div>
    </div>
    <div class="floating">
        <a href="#" class="button" @click="uploadShow">↑</a>
        <p class="button" @click="likeChange">
            <svg v-if="isLike" class="icon" aria-hidden="true">
                <use xlink:href="#icon-like"></use>
            </svg>
            <svg v-else class="icon" aria-hidden="true">
                <use xlink:href="#icon-like-grey"></use>
            </svg>
        </p>
        <p class="button" @click="toMessage">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-message"></use>
            </svg>
        </p>
        <p class="button" @click="reportShow">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-message"></use>
            </svg>
        </p>
    </div>

    <el-dialog v-model="reportVia" title="举报作品" width="500">
        <el-form :model="reportData" label-width="auto" style="max-width: 600px" :rules="rules" ref="ruleFormRef">
            <el-form-item label="违规类型：" prop="typeId">
                <el-radio-group v-model="reportData.typeId">
                    <el-radio :value="item.id" :label="item.name" v-for="item in types"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="违规描述：" prop="description">
                <el-input type="textarea" maxlength="120" v-model="reportData.description" placeholder="请输入违规描述..."
                    show-word-limit></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="reportVia = false">取消</el-button>
                <el-button type="primary" @click="onSubmit(ruleFormRef)">提交</el-button>

            </div>
        </template>
    </el-dialog>

</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import Header from '@/components/Header.vue'
import { reactive, ref } from 'vue'
import api from './api';
import '@/assets/iconfont.js'
import { ElMessage } from 'element-plus';
import user from "@/utils/userUtil"
const route = useRoute();
const router = useRouter()
const photoId = ref(route.params.id)
const data = ref({ createTime: '' })
const images = ref([])
const comment = ref("")
const isLike = ref(false)
const isLogin = user.getToken() != null ? true : false
const comments = ref([])
const reportVia = ref(false)
const reportData = ref()
const types = ref([])
const ruleFormRef = ref()
const rules = reactive({
    typeId: {
        pattern: /^[1-9]\d*$/, message: '请选择违规类型', trigger: 'blur'
    },
    description: {
        required: true, message: '请描述违规内容', trigger: 'blur'
    }
})
const toUser = (id) => {
    router.push({ name: 'userPhoto', params: { id: id } })
}

const onSubmit = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            api.addReport(reportData.value).then(res => {
                let type = 'error'
                if (res.success) {
                    type = 'success'
                    reportVia.value = false
                }
                ElMessage({
                    type: type,
                    message: res.message
                })
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const getReportTypes = () => {
    api.getReportTypes().then(res => {
        types.value = res.datas
    })
}

getReportTypes()

const reportShow = () => {
    reportVia.value = true
    reportData.value = {
        photoId: data.value.id,
        description: '',
        typeId: 0
    }
}

const commentChange = () => {
    if (comment.value != '') {
        api.comment({ photoId: photoId.value, message: comment.value }).then(res => {
            let type = 'error'
            if (res.success) {
                type = 'success'
                getComments()
                comment.value = ''
            }
            ElMessage({
                type: type,
                message: res.message
            })
        })
    }
}

const getComments = () => {
    api.comments(photoId.value).then(res => {
        if (res.success) {
            comments.value = res.datas
        }
    })
}
getComments()

const getPhoto = () => {
    api.getPhoto(photoId.value).then(res => {
        data.value = res.data
        images.value = res.data.fileId.split(',')
    })
}
getPhoto()
const checkLike = () => {
    if (isLogin) {
        api.isLike(photoId.value).then(x => {
            isLike.value = x
        })
    }
}
checkLike()

const likeChange = () => {
    if (!isLogin) {
        ElMessage({
            type: 'success',
            message: "请先登录!"
        })
    } else {
        setTimeout(() => {
            api.like(photoId.value).then(res => {
                if (res.success) {
                    ElMessage({
                        type: "success",
                        message: res.message,
                        duration: 800
                    })
                    checkLike()
                }
            })
        }, 800)
    }

}
const toMessage = () => {
    const targetElement = document.getElementById("comment");
    if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
    }
}
const addWatch = () => {
    if (isLogin) {
        api.addWatch(photoId.value)
    }
}
addWatch()

</script>

<style>
.comment .comment-item {
    width: 80%;
    margin: auto;
    display: flex;
    height: 62px;
    padding: 10px 20px;
    line-height: 31px;
    border-bottom: 1px #ccc dashed;
}

.description {
    width: 920px;
    margin: 20px auto;
    font-size: 14px;
    color: #333;
    line-height: 30px;
}

.floating .icon {
    width: 18px;
    height: 18px;
    /* vertical-align: -0.3em; */
    margin-top: -10px;
    /* fill: currentColor; */
    overflow: hidden;
}

.floating {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
}

.floating .button:hover {
    background-color: #585552;
    cursor: pointer;
}

.floating .button {
    display: block;
    width: 36px;
    height: 36px;
    background-color: #bdbdbd;
    margin-bottom: 10px;
    text-align: center;
    line-height: 36px;
    color: #f1f1f1;
    text-decoration: none;
}

.comment .comment-input .input {
    width: 80%;
}

.comment .comment-input .button {
    margin-left: 10px;
    height: 52px
}

.comment .comment-input {
    width: 85%;
    margin: 20px auto;
}

.comment {
    background-color: #f7f8fa;
    padding: 20px 60px 100px;
}

.article-container {
    /* margin-top: 10px;
    height: 600px; */
    background-color: white;
    width: 100%;
    padding-bottom: 20px;
    position: relative;
}

.article-container .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 920px;
    /* height: 500px; */
    margin: 10px auto;
    text-align: center;
    border-radius: 4px;
}

.jumbotron {
    position: relative;
    top: 0px;
    height: 306px;
    overflow: hidden;
    padding: 0;
    /* margin: 0 -5px; */
}

.jumbotron .shadow {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: url(../../assets/img/shadow_img.png) repeat-x bottom;
}

.jumbotron .container {
    position: relative;
    height: 100%;
    max-width: 65%;
    margin: auto;
}

.item {
    margin-top: 10px;
    margin-right: 30px;
}

.jumbotron h2.work-title {
    position: absolute;
    bottom: 80px;
    z-index: 99;
    font-size: 40px;
    left: 20px;
    right: 20px;
    text-align: left;
    color: white;
}

.jumbotron .author-info {
    position: absolute;
    bottom: 30px;
    z-index: 99;
    left: 20px;
    color: white;
}

.jumbotron .author-info .author-name {
    border-bottom: 1px white solid;
}

.jumbotron .author-info .author-name:hover {
    cursor: pointer;
}



.jumbotron .timeago {
    color: #aaaaaa;
    padding-left: 20px;
}

.jumbotron .category {
    position: absolute;
    width: 200px;
    bottom: 30px;
    z-index: 99;
    color: #aaaaaa;
    right: 20px;
}

.jumbotron .count {
    color: #aaaaaa;
    padding-left: 20px;
}

.jumbotron span {
    font-size: 14px;
}
</style>
